<template>
    <div>
        <myheader></myheader>
            <br><br>
            <!-- 面包屑导航 -->
            <Breadcrumb :datas='datas'></Breadcrumb>

            <section class="featured-block text-center">
                <div class="container">
                    <table>
                        <tr>
                            <th>商品名称</th>
                            <th>商品价格</th>
                            <th>商品图片</th>
                            <th>商品关注数</th>
                        </tr>
                        <tr v-for="good in goods">
                            <td><a target='_bank' :href="'/item?id=' + good.id">{{ good.name }}</a></td>
                            <td>{{ good.price}}</td>
                            <td>
                            <img
                                :src="qnsrc + good.img"
                                alt
                                width="120"
                                height="120"
                                class="rounded-corners img-fluid"
                            />
                            </td>
                            <td>{{ good.flow }}</td>
                        </tr>
                    </table>
                </div>
            </section>


            <br><br>
            <br><br>
            <br><br><br>
        <myfooter></myfooter>

    </div>
</template>


<script>
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';
import axios from 'axios'
import {config} from '../config.js'

export default {
    data() {
        return {
            //声明面包屑变量
            datas:[{title:'首页',route:{name:'index'}},{title:'检索页面'}],
            word:'',
            goods:'',
            //七牛云地址
            qnsrc:config['qiniu']
        }
    },
    methods: {
        //获取检索查到的数据
        get_good(){
            //验证非空
            if (this.word!=""){
                axios.get(config['djurl']+'goodsearch/',{params:{word:this.word}}).then(res=>{
                    this.goods = res.data;
                    console.log(res.data)
                    if (this.goods.length == 0){
                        this.$Message('对不起，暂时没有您想要的商品')
                    }
                })
            }
        }
    },
    //注册组件标签
    components:{
        'myheader':myheader,
        'myfooter':myfooter,
    },
    mounted(){
        this.word = this.$route.query.value;
        console.log(this.word);
        this.get_good();
    }
}
</script>
